﻿@{
    ViewBag.Title = "AddBook";
}
@using BLL;
@using Entity;
<style type="text/css">
    .aa {
        background-color: #808080;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    th {
        width: 180px;
    }
</style>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    function preview() {
        //获取文件框的第一个文件,因为文件有可能上传多个文件,咱这里是一个文件
        var file = document.getElementById("fileload").files[0];
        //可以进行一下文件类型的判断
        var fileType = file.type.split("/")[0];
        if (fileType != "image") {
            alert("请上传图片")
            return;
        }
        //图片大小的限制
        var fileSize = Math.round(file.size / 1024 / 1024);
        if (fileSize >= 3) {
            alert("请上传小于少于3M的图片");
            return;
        }
        //获取img对象
        var img = document.getElementById("image");
        //建一条文件流来读取图片
        var reader = new FileReader();
        //根据url将文件添加的流中
        reader.readAsDataURL(file);
        //实现onload接口
        reader.onload = function (e) {
            //获取文件在流中url
            url = reader.result;
            //将url赋值给img的src属性
            img.src = url;
        };


    }
    function call() {
        //将img的src属性赋值为空串
        document.getElementById("image").src = "";
        //选择文件框的value属性赋值为空串
        document.getElementById("fileload").value = "";
    }

    $(function () {
        //实现预览功能
        call();
        //实现取消上传功能
        
    })
</script>
<form action="../Books/AddBook" method="post" enctype="multipart/form-data">
    <table border="1" cellspacing="0">
        <tr>
            <th colspan="2">
                <h2 class="aa">添加图书</h2>
            </th>
        </tr>
         <tr>
            <th>书号:</th>
            <th>
                <input type="text" name="BookNumber" /></th>
        </tr>
        <tr>
            <th>书名:</th>
            <th>
                <input type="text" name="BookName" /></th>
        </tr>
        <tr>
            <th>作者:</th>
            <th>
                <input type="text" name="BookAuthor" /></th>
        </tr>
        <tr>
            <th>出版社:</th>
            <th>
                <input type="text" name="BookPress" /></th>
        </tr>
        <tr>
            <th>出版日期:</th>
            <th>
                <input type="text"name="BookTime" /></th>
        </tr>
        <tr>
            <th>图书定价:</th>
            <th>
                <input type="text" name="BookPrice" /></th>
        </tr>
        <tr>
            <th>所属分类：</th>
            <th>
                  <select name="TypeID">
                      @foreach (var item in ViewBag.tt)
                      {
                            <option value="@item.TypeID">@item.TypeName</option>
                      }
                </select>
            </th>
        </tr>
        <tr>
            <th>图书状态:</th>
            <th>
                <input type="radio" name="BookState" value="1" />可用<input type="radio" name="BookState" value="2" />不可用</th>
        </tr>
        <tr>
            <th>图书简介:</th>
            <th>
                <textarea rows="5" cols="20" name="BookDescribe"></textarea></th>
        </tr>
        <tr>
            <th>图书封面:</th>
            <th>
                <input id="fileload" type="file" onchange="preview();" name="BookPicture"/>
                <!--建一个文件选择框-->
                <input type="button" value="取消" onclick="call();" />
                <h2>预览</h2>
                <div style="width: 300px; height: 200px; border: 1px solid #303030;">
                    <!--设置一个框放图片-->
                    <img id="image" width="100%" height="100%" src="" />
                    <!--放图片的标签-->
                </div>
            </th>
        </tr>
        <tr>
            <th>
                图书库存:
            </th>
            <th>
                <input  type="text" name="BookCount"/>
            </th>
        </tr>
        <tr>
            <th>
                <input type="submit" value="提交" /></th>
            <th>
                <input type="reset"value="重置" /></th>
        </tr>
    </table>
</form>



